$blue = #1A69B5
$red = #A52117

user-select(value)
  user-select value
  -webkit-user-select value

@media (any-hover: none)
  #lv-recording
    display none

#lv-recording
  position relative

#lv-recording-dialog
  background-color #2A2A2A
  border-radius 2px 2px 0 0
  box-shadow 2px -2px 2px 2px rgba(0, 0, 0, 0.3)
  box-sizing border-box
  color #FFF
  font-family sans-serif
  line-height 1
  
  position absolute
  bottom calc(var(--lv-controls-height) - 2px)
  right 0
  z-index 3
  
  max-height 20rem
  overflow-y auto
  padding .5em
  width 23rem
  
  > h3
    color $blue
    margin .5em 0 .2em

#lv-recording-configuration
  border-spacing 0 1em
  width 100%
  
  > tbody > tr
    > th, > td
      vertical-align top
    
    > th
      text-align right
      
    td
      padding-left 1em
    
    > th[colspan="2"]
      color $blue
      text-align center

    > th:not([colspan="2"])
      font-size 1em
      font-weight normal
      padding-right .2em
      text-align right

/* configuration */
.recorder-plugin
  display inline-block
  font-family sans-serif
  font-size .8em
  margin 0 .25em
  text-align center
  
.recorder-plugin-icon
  background-color #222
  border-radius 5px
  cursor pointer
  display block
  margin 0 auto
  
  &.active
    background-color #F00
    
  text
    user-select none

/* saved recordings */
.recordings
  font-size 1.5em
  list-style-position inside

.recording-results
  border-collapse collapse
  font-size 0.6em
  width 100%

  > caption
    padding-left 54px
    text-align left
    user-select text
  
  > tbody > tr
    background-color #333
    
    > th
      padding 6px
      width 36px
    
    > td
      padding 6px
    
  textarea
    width 100%

  :link
    background-color $blue
    box-sizing border-box
    color #FFF !important
    display block
    padding .5em
    text-align center
    text-decoration none
    width 100%

.shortcut
  font-family monospace
  font-size 1em
  width 18ch
